import Input from "@/components/Input";
import { Dialog, Form } from "@nutui/nutui-react-taro";
import { useRequest } from "taro-hooks";
import { showToast } from "@tarojs/taro";
import { useEffect } from "react";
import { addZone } from "@/services/MaterialZone";
import RadioGroup from "@/components/Form/RadioGroup";
import { useFamilyStore } from "@/model";
import { enumConvertOption } from "@/utils";
import { ZoneTypeEnum } from "@/constants/enum";

export default ({ open, onClose, refresh }) => {
  const { family } = useFamilyStore();
  const [form] = Form.useForm();
  const { run } = useRequest(addZone, {
    manual: true,
    onSuccess: () => {
      showToast({
        title: "新增成功",
        icon: "none",
      });
      onClose();
      refresh();
    },
  });
  useEffect(() => {
    form.setFieldsValue({});
  }, [open]);
  return (
    <Dialog
      title="新增分区"
      visible={open}
      onConfirm={() => {
        form.submit();
      }}
      onCancel={() => {
        onClose();
      }}
    >
      <Form
        labelPosition="top"
        form={form}
        onFinish={(v) => {
          run({
            ...v,
            familyId: family.id,
          });
        }}
      >
        <Form.Item
          label="类型"
          name="type"
          rules={[
            {
              required: true,
              message: "请选择分区类型",
            },
          ]}
        >
          <RadioGroup
            options={enumConvertOption(ZoneTypeEnum)}
            multiple={false}
          />
        </Form.Item>
        <Form.Item
          label="名称"
          name="name"
          rules={[
            {
              required: true,
              message: "请输入家庭名称",
            },
          ]}
        >
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item
          label="描述"
          name="description"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input placeholder="请输入" />
        </Form.Item>
      </Form>
    </Dialog>
  );
};
